package pages

import (
	"github.com/templui/templui/internal/ui/layouts"
	"github.com/templui/templui/internal/ui/modules"
	"github.com/templui/templui/internal/ui/showcase"
)

templ Input() {
	@layouts.DocsLayout(
		"Input",
		"Text field that allows users to enter and edit values.",
		[]modules.TableOfContentsItem{
			{
				ID:   "installation",
				Text: "Installation",
			},
			{
				Text: "Examples",
				ID:   "examples",
				Children: []modules.TableOfContentsItem{
					{
						Text: "File",
						ID:   "file",
					},
					{
						Text: "Disabled",
						ID:   "disabled",
					},
					{
						Text: "With Label",
						ID:   "with-label",
					},
					{
						Text: "Password",
						ID:   "password",
					},
					{
						Text: "Time",
						ID:   "time",
					},
					{
						Text: "Time (Styled)",
						ID:   "time-styled",
					},
					{
						Text: "Form",
						ID:   "form",
					},
				},
			},
			{
				ID:   "api",
				Text: "API Reference",
				Children: []modules.TableOfContentsItem{
					{
						ID:   "input",
						Text: "Input",
					},
				},
			},
		},
	) {
		@modules.PageWrapper(modules.PageWrapperProps{
			Name:        "Input",
			Description: templ.Raw("Text field that allows users to enter and edit values."),
			Tailwind:    true,
			VanillaJS:   true,
			Breadcrumbs: modules.Breadcrumbs{
				Items: []modules.BreadcrumbItem{
					{
						Text: "Docs",
						Path: "/docs",
					},
					{
						Text: "Components",
						Path: "/docs/components",
					},
					{
						Text: "Input",
					},
				},
			},
		}) {
			@modules.ExampleWrapper(modules.ExampleWrapperProps{
				ShowcaseFile:    showcase.InputDefault(),
				PreviewCodeFile: "input_default.templ",
			})
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Installation",
				ID:    "installation",
			}) {
				@modules.ComponentUsage(modules.ComponentUsageProps{
					ComponentName: "input",
					JSFiles:       []string{"input"},
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Examples",
				ID:    "examples",
			}) {
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "File",
					ShowcaseFile:    showcase.InputFile(),
					PreviewCodeFile: "input_file.templ",
					ID:              "file",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Disabled",
					ShowcaseFile:    showcase.InputDisabled(),
					PreviewCodeFile: "input_disabled.templ",
					ID:              "disabled",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "With Label",
					ShowcaseFile:    showcase.InputWithLabel(),
					PreviewCodeFile: "input_with_label.templ",
					ID:              "with-label",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Password",
					ShowcaseFile:    showcase.InputPassword(),
					PreviewCodeFile: "input_password.templ",
					ID:              "password",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Time",
					ShowcaseFile:    showcase.InputTimeDefault(),
					PreviewCodeFile: "input_time_default.templ",
					ID:              "time",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Time (Styled)",
					ShowcaseFile:    showcase.InputTimeStyled(),
					PreviewCodeFile: "input_time_styled.templ",
					ID:              "time-styled",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Form",
					ShowcaseFile:    showcase.InputForm(),
					PreviewCodeFile: "input_form.templ",
					ID:              "form",
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "API Reference",
				ID:    "api",
			}) {
				@modules.APILegend()
				<div id="input">
					@modules.APITable(modules.APITableProps{
						Title:       "Input",
						Description: "Text field that allows users to enter and edit values.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the input element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the input.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the input element.",
								Required:    false,
							},
							{
								Name:        "Name",
								Type:        "string",
								Default:     "",
								Description: "Name attribute for the form input.",
								Required:    false,
							},
							{
								Name:        "Type",
								Type:        "Type",
								Default:     "text",
								Description: "Input type. Options: 'text', 'password', 'email', 'number', 'tel', 'url', 'search', 'date', 'time', 'file'.",
								Required:    false,
							},
							{
								Name:        "Placeholder",
								Type:        "string",
								Default:     "",
								Description: "Placeholder text to display when input is empty.",
								Required:    false,
							},
							{
								Name:        "Value",
								Type:        "string",
								Default:     "",
								Description: "Current value of the input field.",
								Required:    false,
							},
							{
								Name:        "Disabled",
								Type:        "bool",
								Default:     "false",
								Description: "Whether the input is disabled and non-interactive.",
								Required:    false,
							},
							{
								Name:        "Readonly",
								Type:        "bool",
								Default:     "false",
								Description: "Whether the input is read-only.",
								Required:    false,
							},
							{
								Name:        "FileAccept",
								Type:        "string",
								Default:     "",
								Description: "Accepted file types for file inputs (e.g., '.jpg,.png').",
								Required:    false,
							},
							{
								Name:        "HasError",
								Type:        "bool",
								Default:     "false",
								Description: "Whether the input has a validation error.",
								Required:    false,
							},
							{
								Name:        "NoTogglePassword",
								Type:        "bool",
								Default:     "false",
								Description: "Disable password visibility toggle for password inputs.",
								Required:    false,
							},
						},
					})
				</div>
			}
		}
	}
}
